<template>
    <div id="box">
        <transition name="animation">
            <!--
            添加一个进入页面时的动画，flag为true时才会显示内容
            data 中有flag属性
            当进入页面后的100毫秒会将flag改为true从而触发动画效果

            -->
            <div class="top" v-show="flag">
                <div class="card1" ref="card1">
                    <el-upload
                        class="upload-demo"
                        action="http://127.0.0.1:3301/tax/uploadImg"
                        :on-success="uploading"
                        :show-file-list="false">
                        <el-image :src="img" v-loading="loading" alt=""></el-image>
                    </el-upload>
                    <div class="right">
                        <h1>{{ $route.query.username }}</h1>
                        <p>
                            <span>工号:   {{ $route.query.jobNumber }}</span>
                            <span>证件号码:   {{ $route.query.idNumber }}</span>
                            <span>手机号:   {{ $route.query.phone }}</span>
                        </p>
                        <p>
                            <span>部门:   {{ $route.query.pname }}</span>
                            <span>岗位:   项目经理</span>
                        </p>
                    </div>
                    <el-button class="dayin" type="primary" plain size="mini"
                               @click="$router.push('/home/staffAdd?id=' + $route.query.id)"
                    >添加
                    </el-button>
                </div>


                <el-card class="card2" shadow="hover" ref="card2">
                    <template v-slot:header>
                        <h1>累计应纳税所得额明细</h1>
                    </template>

                    <el-table :data="tableData" :max-height="minHeight" stripe v-loading="loading">

                        <el-table-column align="center" label="薪资所属月" fixed="left" width="150">
                            <template v-slot="scope">
                                {{ scope.row.date | year_month }}
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="税款所属期" width="150">
                            <template v-slot="scope">
                                {{ scope.row.date | year_month }}
                            </template>
                        </el-table-column>

                        <el-table-column align="center" label="收入" prop="salary"/>
                        <el-table-column align="center" label="累计子女教育" prop="children" width="150"/>
                        <el-table-column align="center" label="累计住房租金" prop="rent" width="150"/>
                        <el-table-column align="center" label="累计赡养老人" prop="provide" width="150"/>
                        <el-table-column align="center" label="累计继续教育" prop="continue" width="150"/>
                        <el-table-column align="center" label="累计社保个人合计" prop="socialSecurity" width="150"/>
                        <el-table-column align="center" label="累计公积金个人合计" prop="accumulationFund" width="150"/>


                        <el-table-column align="center" label="累计专项扣除" prop="sum2" width="150"/>
                        <el-table-column align="center" label="累计专项附件扣除" prop="sum" width="150"/>


                        <el-table-column align="center" label="累计应纳税所得额" width="150">
                            <template v-slot="scope">
                                {{ scope.row.sum + scope.row.sum2 || null }}
                            </template>
                        </el-table-column>

                        <el-table-column align="center" label="当月应纳税额" width="150">
                            <template v-slot="scope">
                                {{ ratalTotal(scope.row.sum + scope.row.sum2, scope.row.salary) }}
                            </template>
                        </el-table-column>


                    </el-table>
                    <el-pagination
                        small
                        layout="prev, pager, next"
                        :total="total"
                        ref="page"
                        background
                        prev-text="上一页"
                        next-text="下一页"
                        :style="{float:'right'}"
                        @current-change="changePage"
                    >
                    </el-pagination>
                </el-card>
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    data() {
        return {
            flag: false,
            loading: true,
            minHeight: 0,
            tableData: [],
            tableDataCopy: [],
            pageSize: 10,//一页有所少条数据
            page: 1,//当前页
            total: 0,//数据总数
            img: this.$route.query.img
        };
    },
    mounted() {
        this.flag = true
        this.$nextTick(() => {
            let card1 = this.$refs.card1;
            let card2 = this.$refs.card2.$el;
            card1.style.height = card1.clientHeight + 'px'
            card2.style.height = card2.clientHeight + 'px'
            // 布局适配，当打开控制台时，盒子上下盒子高度不变
            let pageheight = this.$refs.page.$el.clientHeight;//底部分页的高度

            this.minHeight = card2.clientHeight - 85 - pageheight;//减去头部插槽的距离,不然会少显示一个,因为头部插槽,不占位

        })
        this.getData()
        setTimeout(() => {
            // 判断是否有数据，如果没有数据，提示服务器连接失败
            if (this.tableDataCopy.length === 0) {
                this.loading = false
                this.$message.error('服务器响应失败')
            }
        }, 5000)
    },
    methods: {
        async getData() {

            let {data} = await this.$axios.get('tax/ratalInfo', {
                params: {
                    id: this.$route.query.id
                }
            })
            this.tableDataCopy = data.data
            // 将全部数据赋值给tableDataCopy

            // 再将tableDataCopy切片出10条，赋值给tableData
            this.tableData = this.tableDataCopy.slice((this.page - 1) * this.pageSize, this.page * this.pageSize)
            this.total = this.tableDataCopy.length
            this.loading = false

        },
        changePage(page) {
            this.page = page
            this.loading = true
            this.getData()
        },
        async uploading(response, file, fileList) {
            await this.$axios.post('tax/changeImg', {
                id: this.$route.query.id,
                img: response.file
            })
            this.img = response.file
            this.loading = true
            setTimeout(() => {
                this.loading = false
            }, 1000)
        },
        ratalTotal(value, salary) {
            // 计算当月应纳税额
            if (value) {
                if (salary > 0 && salary <= 36000) {
                    return (value * 0.03).toFixed(2)
                } else if (salary > 36000 && salary <= 144000) {
                    return (value * 0.1).toFixed(2)
                } else if (salary > 144000 && salary <= 300000) {
                    return (value * 0.2).toFixed(2)
                } else if (salary > 300000 && salary <= 420000) {
                    return (value * 0.25).toFixed(2)
                } else if (salary > 420000 && salary <= 660000) {
                    return (value * 0.3).toFixed(2)
                } else if (salary > 660000 && salary <= 960000) {
                    return (value * 0.45).toFixed(2)
                } else {
                    return (value * 0.45).toFixed(2)
                }
            } else {
                // 如果是非法数字则返回null
                return null
            }
        }
    },
}
</script>

<style lang="scss" scoped>


#box {
    height: 100%;
    overflow-x: hidden;

    .animation-enter, animation-leave-to {
        transform: translateX(50px);
        opacity: 0;
    }

    .animation-enter-active {
        transition: all .5s ease-in-out;
    }

    .animation-enter-to, animation-leave {
        transform: translateX(0);
        opacity: 1;
    }

    .top {
        height: 100%;
        position: relative;
        overflow-y: auto;
        overflow-x: hidden;

        .card1 {
            height: 20%;
            background: #fff;
            border-radius: 3px;
            padding: 20px;
            box-sizing: border-box;
            overflow-y: auto;
            position: relative;

            &:hover {
                box-shadow: 0 0 5px 5px #f0f0f0;
            }

            ::v-deep .el-upload {
                height: 90px;
                float: left;

                .el-image {
                    height: 100%;
                    float: left;
                    z-index: 0;
                    position: relative;
                    cursor: pointer;

                    &:hover::after {
                        content: '修改头像';
                        color: #fff;
                        z-index: 10;
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        background: rgba(146, 126, 126, 0.5);
                        width: 100%;
                        text-align: center;
                    }
                }
            }


            .right {
                height: 100%;
                float: left;
                color: #898787;
                padding: 0 15px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                p {
                    font-size: 14px;

                    span {
                        padding: 0 50px 0 0;
                    }
                }
            }

            .dayin {
                position: absolute;
                top: 20px;
                right: 20px;
            }
        }

        .card2 {
            height: 75%;
            margin-top: 24px;
        }
    }
}
</style>
